<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no" />
	<meta content="yes" name="apple-mobile-web-app-capable" />
	<meta content="yes" name="apple-touch-fullscreen" />
	<meta content="telephone=no,email=no" name="format-detection" />
	<meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes" />
	<link rel="stylesheet" type="text/css" href="./js/swiper/swiper-bundle.min.css" />
	<link rel="stylesheet" type="text/css" href="./css/iconfont.css" />
	<link rel="stylesheet" type="text/css" href="./css/common.min.css" />
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
	<title>Fubit</title>
</head>

<body>
	<div id="preloader">
		<div class="preloader">
			<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px"
				height="30px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
				<g id="fbit-loading" fill="#cca252">
					<path opacity="0.2"
						d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946
                    s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634
                    c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z">
					</path>
					<path d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
                    C22.32,8.481,24.301,9.057,26.013,10.047z" transform="rotate(42.1171 20 20)">
						<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 20 20"
							to="360 20 20" dur="0.5s" repeatCount="indefinite"></animateTransform>
					</path>
				</g>

			</svg>
		</div>

	</div>
	<header class="nav-header">
		<div class="container-01">
			<div class="flex align-center justify-center">

				<div class="search-con flex align-center gutter-mt gutter-mb">

					<div class="search-text">
						<input placeholder="搜索" />
					</div>
					<div class="btnSearch">
						<i class="iconfont icon-sousuo"></i>
					</div>

				</div>

			</div>


			<div class="my-nav">
				<div class="flex justify-center swiper">
					<div class="swiper-wrapper">
						<div class="swiper-slide"><a href="index.html">首頁</a></div>
						<div class="swiper-slide"><a href="selling.html">熱賣商品榜</a></div>
						<div class="swiper-slide"><a href="lib.html">選品庫</a></div>
					</div>
				</div>
			</div>

		</div>
	</header>
	<section class="card gutter-pt gutter-pb">
		<div class="container-01">
			<div class="d-con flex gutter-mb">
				<div class="d-img">
					<div class="swiper d-swiper">
						<div class="swiper-wrapper">
							<div class="swiper-slide">
								<a href="https://www.baidu.com">
									<img src="./images/mock/pic-1.jpg" alt="">
								</a>
							</div>
							<div class="swiper-slide">
								<a href="https://www.baidu.com">
									<img src="./images/mock/pic-2.jpg" alt="">
								</a>
							</div>
							<div class="swiper-slide">
								<a href="https://www.baidu.com">
									<img src="./images/mock/pic-3.jpg" alt="">
								</a>
							</div>
						</div>
						<div class="swiper-pagination"></div>


					</div>
				</div>
				<div class="d-info">
					<div class="d-tit gutter-pb">车厘子大连美早烟台山东大樱桃黑珍珠特大新鲜应季水果送礼品礼物时令母亲节端午节母亲节</div>
					<div class="d-desc gutter-pb">黑车才美味车厘子大连美早烟台山东大樱桃黑珍珠特大新鲜应季水果送礼品礼物时令母亲节端午节母亲节</div>
					<div class="d-data flex align-center justify-between gutter-pt gutter-pb">
						<div class="d-zhuan danger-color-txt">
							<div class="d-data-tit">預估每單賺</div>
							<div class="js-zhuan" data-val="0.08">$&nbsp;</div>
						</div>
						<div class="d-zhuan">
							<div class="d-data-tit">佣金率</div>
							<div class="format"><em>30</em>&nbsp;%</div>
						</div>
						<div class="d-zhuan">
							<div class="d-data-tit">售價</div>
							<div class="js-zhuan" data-val="0.1">$&nbsp</div>
						</div>
					</div>
					<div class="d-info-btn flex justify-between gutter-pt">
						<a class="js_add" href="javascript:;">
							<div><i class="iconfont icon-jiahao primary-color-txt"></i></div>
							<div class="d-info-tit">加櫥窗</div>
						</a>
						<a class="js-apply" href="javascript:;">
							<div><i class="iconfont icon-present primary-color-txt"></i></div>
							<div class="d-info-tit">樣品申請</div>
						</a>
						<a class="js-rel" href="javascript:;">
							<div><i class="iconfont icon-phone primary-color-txt"></i></div>
							<div class="d-info-tit">聯繫商家</div>
						</a>
					</div>

				</div>

			</div>
			<div class="d-shop flex gutter-mt gutter-mb">
				<div class="d-shop-l">
					<div class="flex gutter-pb">
						<div class="block-circle-img"><img src="./images/mock/pic-1.jpg" alt=""></div>

						<div class="block-tit-name-con">
							<div class="flex align-center">
								<span class="block-tit-name">九号当铺九号当铺九号当铺九号当铺九号当铺九号当铺九号当铺</span>
								<span class="block-mark">小店</span>
							</div>
							<div class="live-star js-star" data-val="3.2"></div>
						</div>

					</div>
					<div class="d-shop-hot gutter-pt">
						<div class="d-shop-hot-tit gutter-pb">
							<i class="iconfont icon-goods_hot_fill primary-color-txt"></i><span>熱銷商品</span>
						</div>
						<div class="item-con gutter-pb">
							<a class="flex" target="_blank" href="javascript:;">
								<div class="live-body flex-shrink"><img src="./images/mock/pic-8.jpg" alt=""></div>
								<div>
									<div class="live-tit">
										商品名称商品名称商品名称商品名称商品名称商品名称
									</div>
									<div class="live-price">
										<span class="js-price" data-val="18.99"></span>
										<span class="live-sold">已售<em class="js-sold" data-val="127"></em></span>
									</div>

									<div class="live-zhuan">
										<span class="js-zhuan" data-val="1.2"></span>
									</div>
								</div>
							</a>
						</div>
						<div class="item-con gutter-pb">
							<a class="flex" target="_blank" href="https://www.baidu.com">


								<div class="live-body flex-shrink"><img src="./images/mock/pic-8.jpg" alt=""></div>


								<div>
									<div class="live-tit">
										商品名称商品名称商品名称商品名称商品名称商品名称
									</div>
									<div class="live-price">
										<span class="js-price" data-val="18920"></span>
										<span class="live-sold">已售<em class="js-sold" data-val="20000"></em></span>
									</div>

									<div class="live-zhuan">
										<span class="js-zhuan" data-val="4441.99">赚&nbsp;<strong>$</strong></span>
									</div>
								</div>

							</a>


						</div>
						<div class="item-con">
							<a class="flex" target="_blank" href="https://www.baidu.com">


								<div class="live-body flex-shrink"><img src="./images/mock/pic-8.jpg" alt=""></div>


								<div>
									<div class="live-tit">
										商品名称商品名称商品名称商品名称商品名称商品名称
									</div>
									<div class="live-price">
										<span class="js-price" data-val="189"></span>
										<span class="live-sold">已售<em class="js-sold" data-val="1289000"></em></span>
									</div>

									<div class="live-zhuan">
										<span class="js-zhuan" data-val="12"></span>
									</div>
								</div>

							</a>


						</div>
					</div>

				</div>
				<div class="d-shop-r">
					<div class="nav flex">
						<a class="active" href="javascript:;">
							商品详情
						</a>
					</div>
					<div class="content">
						<img src="./images/mock/slide1.jpg" alt="">
					</div>
				</div>
			</div>
		</div>
	</section>
	<script type="text/javascript" src="./js/jquery.min.js"></script>
	<script src="./js/swiper/swiper-bundle.min.js"></script>
	<script src="./js/app.js"></script>
	<script>
		$(function () {
			$('.js-zhuan').each(function () {
				var val = $(this).attr('data-val');
				var res = myList.fomatPrice(val);
				var temp = '$<span class="format"><em>' + res[0] + '</em>.' + res[1] + '</span>'
				$(this).html(temp);
			})
			$('.js-sold').each(function () {
				var val = $(this).attr('data-val');
				var res = myList.formatSold(val);
				$(this).html(res);
			})
			$('.js-price').each(function () {
				var val = $(this).attr('data-val');
				var res = myList.fomatPrice(val);
				var temp = '$' + res[0] + '.' + res[1];
				$(this).html(temp);
			})
			$('.js-star').each(function () {
				var val = $(this).attr('data-val');
				var starTemp = myList.showStar(val);
				$(this).html(starTemp);
			})
            
			//两个按钮 改变文字 点击后事件
			$('.js_add').click(function(){
				var pop=new Mypop("提示", '加入橱窗吗',{
					confirmBtnTxt:"确定",//确定按钮文字
					cancelBtnTxt: "关闭", //取消按钮文字		            
		           callback:function(){  //确定点击后的事件
					   alert('a');
					   pop.hide(); //Mypop 关闭的方法
				   } 
				});
			})

			//默认状态 （一个关闭按钮）
			$('.js-apply').click(function(){
				Mypop("提示", '<p style="color:#ff0000;">目前没有申请福利</p>');
			})


		})
	</script>
</body>

</html>